// 这个文件是vue-cli脚手架创建出来的项目的配置文件
// 在这个文件中可对项目打包构建进行全局性配置

// webpack在打包时，底层用了node.js
// 所以在vue.config.js配置文件中，可以先导入并使用node.js的核心模块
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')

module.exports = {
  // 部署应用包时的基本 URL，默认值为'/'，需要部署到web服务器才能访问（http协议）
  // 若想在本地打开（file协议），则将值设置为''或者'./'，所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
  publicPath: './',
  // 定制主题配置
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        // lessOptions: {}
        modifyVars: {
          // 方法一：直接覆盖变量（实际开发不使用此方法，因为每次修改都重启）
          // 'nav-bar-background-color': '#007bff'

          // 方法二：或者可以通过 less 文件覆盖（文件路径为绝对路径）
          // 通过path拼接路径并组成模板字符串
          hack: `true; @import "${themePath}";`
        }
      }
    }
  }
}
